<div class="d-flex align-items-center justify-content-between">
  <h4 mat-dialog-title class="mb-2">
    {{
      (this.data.isEdit
        ? 'multiCluster.edit.title'
        : 'multiCluster.promotion.title'
      ) | translate
    }}
  </h4>
  <button
    (click)="onCancel()"
    class="mb-2"
    aria-label="Close dialog"
    mat-icon-button>
    <i class="eos-icons">close</i>
  </button>
</div>
<hr class="fancy" />

<div>
  <div mat-dialog-content class="dialog-content p0 m0" style="height: 285px">
    <form #clusterForm="ngForm" class="pt-lg">
      <div class="d-flex flex-column flex-grow-1">
        <mat-form-field appearance="standard" class="flex-grow-1">
          <mat-label>{{ 'multiCluster.promotion.name' | translate }}</mat-label>
          <input
            matInput
            [(ngModel)]="cluster.name"
            name="name"
            [disabled]="readOnly"
            required
            [attr.maxlength]="'general.FILTER_MAX_LEN' | translate"
          />
          <mat-error></mat-error>
        </mat-form-field>
      </div>
      <div class="d-flex justify-content-start align-items-center">
        <mat-form-field appearance="standard" class="flex-grow-1 mr-4">
          <mat-label>{{
            'multiCluster.promotion.server' | translate
          }}</mat-label>
          <input
            matInput
            [(ngModel)]="cluster.host"
            name="ip"
            required
            pattern="^([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])(\.([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]{0,61}[a-zA-Z0-9]))*$"
            [attr.maxlength]="'general.FILTER_MAX_LEN' | translate"
            [disabled]="readOnly" />
          <mat-error></mat-error>
        </mat-form-field>
        <mat-form-field appearance="standard" class="flex-grow-1">
          <mat-label>{{ 'multiCluster.promotion.port' | translate }}</mat-label>
          <input
            matInput
            [(ngModel)]="cluster.port"
            name="port"
            required
            pattern="^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$"
            [attr.maxlength]="'general.FILTER_MAX_LEN' | translate"
            [disabled]="readOnly" />
        </mat-form-field>
      </div>

      <div
        *ngIf="isMaster"
        class="d-flex justify-content-start align-items-center">
        <div>
          <label class="nv-modal-item-title mr-2">
            {{ 'multiCluster.fed_sync_repository' | translate }}
          </label>
          <mat-slide-toggle
            id="fed_sync_repo_toggle"
            [(ngModel)]="fed_sync_repo_toggle"
            [ngModelOptions]="{ standalone: true }"></mat-slide-toggle>
          <mat-error></mat-error>
        </div>
      </div>

      <div class="d-flex justify-content-start align-items-center">
        <label class="radio-inline c-radio">
          <input
            id="https"
            type="radio"
            name="proxy"
            [(ngModel)]="useProxy"
            value="https" />
          {{ 'multiCluster.USE_HTTPS_PROXY' | translate }}
        </label>
      </div>
      <div class="d-flex justify-content-start align-items-center">
        <label class="radio-inline c-radio">
          <input
            id="none"
            type="radio"
            name="proxy"
            [(ngModel)]="useProxy"
            value="" />
          {{ 'multiCluster.NO_PROXY' | translate }}
        </label>
      </div>
      <mat-hint>
        {{ 'multiCluster.promotion.hint' | translate }}
      </mat-hint>
    </form>
  </div>
  <div mat-dialog-actions class="d-flex justify-content-end align-items-center">
    <button mat-stroked-button aria-label="Cancel button" (click)="onCancel()">
      {{ 'general.CANCEL' | translate }}
    </button>
    <button *ngIf="isProcessing"
            mat-raised-button
            color="primary"
            type="processing">
      <i class="fa fa-spinner fa-spin"></i>
      {{ 'general.PROCESSING' | translate }}
    </button>
    <button *ngIf="!isProcessing"
      mat-raised-button
      color="primary"
      (click)="onConfirm()"
      type="submit"
      [disabled]="clusterForm.invalid">
      {{ 'general.SUBMIT' | translate }}
    </button>
  </div>
</div>
